vue3中怎么刷新当前页面 |
您所在的位置:网站首页 › vue3 请求 › vue3中怎么刷新当前页面 |
vue3中怎么刷新当前页面
发布时间:2023-04-13 10:09:04
来源:亿速云
阅读:88
作者:iii
栏目:编程语言
这篇“vue3中怎么刷新当前页面”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue3中怎么刷新当前页面”文章吧。 1.业务场景一般我们在删除或者编辑完表格数据的时候,会再次请求接口来刷新表格的数据。如果是同时有好几个接口需要请求,那就不能再每个接口挨个去调了。我们需要使用一种比较友好的方式来实现了。 2.实现思路第一种最直观的就是直接刷新当前页面,比如使location.reload和$router.go(0)方法。但是这种方式会导致页面会有白屏情况,不友好。那么我们能不能刷新当前的vue组件呢?我们知道当vue的组件重新渲染以后它的整个生命周期会重新执行一遍,接口自然而然的也会重新请求一遍的。那么多如何刷新当前组件呢?首先是通过v-if来控制当前页面组件的渲染。在有router-view渲染组件的情况下,我们直接把v-if加在router-view上面。然后通过控制这个判断条件,比如我们就叫做isRouterAlive。 那么这个判断条件如何控制呢?因为涉及到跨组件通信,所以需要使用provide/inject。在router-view组件中通过provide提供一个relaod方法,当删除或者编辑完成表格数据以后,使用inject触发reload方法。在reload方法里面我们来控制判断条件。当realod的时候isRouterAlive=false,紧接着在nextTick中设置为true,这样就可以实现组件重新加载了。 下面我们来看看代码逻辑的实现。 3.代码实现首先修改router-view渲染组件 export default { provide(){ return { reload: this.reload } }, data(){ return { isRouterAlive: true } }, methods: { reload(){ this.isRouterAlive = false //通过this.$nextTick()产生一个微任务,在一次dom事件循环后,重新创建组件 this.$nextTick(() => { this.isRouterAlive = true }) } } } 在table页面,这样实现: 首页 刷新export default { //通过inject获取祖先元素的reload方法 inject: ['reload'], data() { return { isRouterAlive: true, } }, methods: { handleSubmit() { // 假如这是一个编辑提交事件 // 这里是编辑请求的各种逻辑和接口... // 编辑执行成功,就刷新当前页面,请求reload this.reload() }, },} 以上就是关于“vue3中怎么刷新当前页面”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。 推荐阅读: 如何解决Vue3+Element-plus在input框使用属性方式添加图标不显示的问题 Vue3中SetUp的参数props和context实例分析免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。 vue3 上一篇新闻:如何使用vue封装一个自定义日历组件 下一篇新闻:vue的两种路由模式源码分析 猜你喜欢 php如何替换回车符 php curl下载失败的解决方法 php数组如何将key和值转换 php数组如何去掉相同的值 php字符串如何去除最后一个字符 php怎么查询txt文件是否存在 php怎么去掉html标签样式 php如何强制转成字符串 php整数如何转数组中 PHP5.6与PHP7之间有什么区别 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |